<template>
  <div>
    <el-card class="box-card">
      <div slot="header" class="clearfix"><span>机构部门</span></div>
      <el-tree class="filter-tree" :data="datas" 
      :props="defaultProps" node-key="id"
      :show-checkbox="true"
      :check-strictly="true"
      :default-checked-keys="checkedKeys"
      :default-expanded-keys="checkedKeys"
      @node-click="handleNodeChange"
      @check-change="handleCheckChange" 
      :expand-on-click-node="false"  
      :filter-node-method="filterNode" 
      :default-expand-all="true"
      ref="tree"></el-tree>
    </el-card>
  </div>
</template>

<script>
import { getAllTree }  from '@/api/dept'

export default {
  props: ['checkedKeys', 'dept', 'temp'],
  watch: {
    filterText(val) {
      this.$refs.tree.filter(val)
    }
  },
  mounted: function () {
    this.queryData()
  },
  methods: {
    filterNode(value, data) {
      if (!value) return true
      return data.label.indexOf(value) !== -1
    },
    queryData(){
      getAllTree().then(response => {
        this.datas = response.data
      })
    },
    handleNodeChange(item,node, self){
      this.checkDeptId = item.id
      this.$refs.tree.setCheckedKeys([item.id])
      if(this.dept){
        this.dept.id = item.id
        this.dept.name = item.label
      }
      if(this.temp){
        this.temp.deptId = item.id
        this.temp.deptName = item.label
      }
    },
    handleCheckChange(item,node,self){
      if(node==true){
        this.checkDeptId = item.id
        this.$refs.tree.setCheckedKeys([item.id])
      }else{
        if(this.checkDeptId==item.id){
          this.$refs.tree.setCheckedKeys([item.id])
        }
      }
    },
    updateChecked(value){
      this.$refs.tree.setCheckedKeys(value)
    }
    
  },
  data() {
    return {
      checkDeptId: null,
      filterText: '',
      datas: [],
      defaultProps: {
        children: 'children',
        label: 'label',
        id: 'id'
      }
    }
  }
}
</script>

